<html>
	<head>
		<title>hi~ sign in</title>
		<meta charset="UTF-8"/>
		<style>
		.ima{
			width:250px;
			height:180px;
		}
		.formcss{
			width:150px;
		}
		</style>
		<script>
		var xmlhttp;
		function singleClick()
		{
			var form 	= document.getElementById("login_form");
			var element =  new Array();
			var tagElements = form.getElementsByTagName('input'); 
			var formData = new FormData();
			for(var i=0;i<2;i++)
			{
				formData.append(tagElements[i].name,tagElements[i].value);
			}
			var img = document.getElementById("doc");
			formData.append("image",img.files[0]);
			//formData.append(tagElements[i].name,tagElements[i].value);
			xmlhttp =new XMLHttpRequest();//创建http对象
			xmlhttp.onreadystatechange = checkResult; //设置响应函数
			xmlhttp.open("POST","http://127.0.0.1:8080",true);   //设置访问方式和地址 
			xmlhttp.send(formData);  //执行访问（开辟了一个小线程，后台响应后
			document.getElementById("jsshow").innerHTML="提交成功";
			//document.getElementById("submit").target = "_blank";
		}
		function checkResult()
		{
			if (xmlhttp.readyState==4)
			{// 4 = "loaded"
				if (xmlhttp.status==200)
				{// 200 = OK
				// ...our code here...
					window.open().document.write(xmlhttp.responseText);
					//document.getElementById("jsshow").innerHTML = xmlhttp.responseText;
				}
				else
				{
					alert("Problem retrieving XML data");
				}
			}
				//alert(xmlhttp.document);
				//window.open();
		}
		function setImagePreview() 
		{
			//input
			var docObj = document.getElementById("doc");
			//img
			var imgObjPreview = document.getElementById("preview");
			//div
			var divs = document.getElementById("localImag");
			if (docObj.files && docObj.files[0]) 
			{
				//火狐下，直接设img属性
				imgObjPreview.style.display = 'block';
				imgObjPreview.style.width = '80px';
				imgObjPreview.style.height = '80px';
				//imgObjPreview.src = docObj.files[0].getAsDataURL();
				//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
				imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
			} else 
			{
			//IE下，使用滤镜
				docObj.select();
				var imgSrc = document.selection.createRange().text;
				var localImagId = document.getElementById("localImag");
				//必须设置初始大小
				localImagId.style.width = "100px";
				localImagId.style.height = "100px";
				//图片异常的捕捉，防止用户修改后缀来伪造图片
				try {
					localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
					localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
				} catch(e) {
					alert("您上传的图片格式不正确，请重新选择!");
					return false;
				}
				imgObjPreview.style.display = 'none';
				document.selection.empty();
			}
			return true;
		}
		</script>
	</head>
	<body>
		<h3 style="text-align:center">hi~ sign in</h3>
		<div style="text-align:center" id = "jsshow"></div>
		<hr />
		<div align="center" >
		<video class = "ima" src="/resource/beauty.mp4" controls="controls" preload="auto">
		</video>
		<image class = "ima" src = "/resource/login.jpg"/>
		<video class = "ima" src="/resource/animal.mp4" controls="controls" preload="auto">
		</video>
		</div>
		<hr/>
	    <form  id = "login_form" style="width:300px;margin:0 auto"  action = "/resource/login.html" method = "post" target = "_blank">  
		<p>账户：<input  type = "text" name = "acount"></p>
		<p>密码：<input  type = "password"  name = "password"></p>
		<div align = "center" id="localImag">
			<img  id="preview" src="" width="100px" />
		</div>
		<p>头像：<input id="doc" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple onChange="javascript:setImagePreview();" />
		</p>
		</form>
		<div style="width:300px;margin:0 auto"  ><input id = "submit" class = "formcss" type = "button" onclick="singleClick()"  value = "提交"></div>
	</body>
</html>